<script lang="ts" setup>
import type { DataFormOptionsProps } from '#/components/data-form/types';

import { ref } from 'vue';

import { DataForm } from '#/components/data-form';

import { useForm } from './data';

defineProps<{
    enums: Record<string, any>;
}>();

const dataFormRef = ref<InstanceType<typeof DataForm>>();

const { fields } = useForm();

const open = (options: DataFormOptionsProps) => {
    // 打开弹窗
    dataFormRef.value?.open(options);
};

defineExpose({ open });
</script>

<template>
    <DataForm ref="dataFormRef" :fields="fields" title="详情" method="get" width="70vh">
        <template #title="{ form }">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="模块名称:"> {{ form.title }} </el-form-item>
                    <el-form-item label="请求地址:">{{ form.uri }}</el-form-item>
                    <el-form-item label="操作结果:">
                        <el-text :type="form.status === '0' ? 'danger' : 'success'">
                            {{ enums.status?.[form.status]?.label || '--' }}
                        </el-text>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="登录信息:"> {{ form.operator }} / {{ form.ip }} / {{ form.location }} </el-form-item>
                    <el-form-item label="耗时(ms):">{{ form.costTime }}</el-form-item>
                    <el-form-item label="访问时间:">{{ form.createTime }}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="服务接口:">{{ form.method }}()</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="接口描述:">{{ form.description }}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="请求参数:">
                        <el-input v-model="form.params" maxlength="2000" show-word-limit type="textarea" :rows="7" readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="响应报文:">
                        <el-input v-model="form.result" maxlength="2000" show-word-limit type="textarea" :rows="7" readonly />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.status === 0">
                    <el-form-item label="错误信息:">
                        <el-input v-model="form.message" maxlength="2000" show-word-limit type="textarea" :rows="7" readonly />
                    </el-form-item>
                </el-col>
            </el-row>
        </template>
    </DataForm>
</template>
